<template>
  <div v-loading="qLoading" style="line-height:1.8">
    <div>
      <!--      单选题-->
      <div v-if="qType===0">
        <div class="q-title" v-html="question.theme"/>
        <div class="q-content">
          <el-radio-group v-model="question.blank">
            <el-radio v-for="item in question.optionItem" :key="item.prefix" :label="item.prefix">
              <span class="question-prefix">{{ item.prefix }}. </span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <!--      多选题-->
      <div v-else-if="qType===1">
        <div class="q-title" v-html="question.theme"/>
        <div class="q-content">
          <el-checkbox-group v-model="question.blank">
            <el-checkbox v-for="item in question.optionItem" :label="item.prefix" :key="item.prefix">
              <span class="question-prefix">{{ item.prefix }}. </span>
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!--      判断题-->
      <div v-else-if="qType===2">
        <div class="q-title" v-html="question.theme" style="display: inline;margin-right: 10px"/>
        <span style="padding-right: 10px;">(</span>
        <el-radio-group v-model="question.blank">
          <el-radio v-for="item in question.optionItem" :key="item.prefix" :label="item.prefix">
            {{ item.prefix }}. <span v-html="item.content" class="q-item-span-content"></span>
          </el-radio>
        </el-radio-group>
        <span style="padding-left: 10px;">)</span>
      </div>
      <!--      简答题-->
      <div v-else-if="qType===3">
        <div class="q-title" v-html="question.theme"/>
        <div style="margin-top: 20px;">
          输入考生得分: <el-input-number v-model="question.answer.student_score" :min="0" :max="parseInt(question.title_score)"
                           label="输入考生得分" size="small">
          </el-input-number>
        </div>
      </div>
      <div class="question-answer-show-item" style="margin-top: 20px;">
        题目分数: <span style="color: red;">{{ question.title_score }}</span>
      </div>
      <div class="question-answer-show-item" style="margin-top: 10px;">
        正确答案: <span style="color: red;" v-html="question.right_answer"></span>
      </div>
      <div class="question-answer-show-item" style="margin-top: 10px;color: #596cc9;">
        考生答案: <span v-html="question.answer.content"></span>
      </div>
      <div class="question-answer-show-item" style="margin-top: 10px;color: #596cc9;">
        考生得分: <span>{{ question.answer.student_score }}</span>
      </div>
      <div class="question-answer-show-item" style="margin-top: 10px;color: #596cc9;">
        是否正确:&nbsp;&nbsp;
        <el-tag type="info" size="small" v-if="question.answer.is_right===0">{{ question.answer.right_type }}</el-tag>
        <el-tag type="success" size="small" v-else-if="question.answer.is_right===1">{{ question.answer.right_type }}</el-tag>
        <el-tag type="primary" size="small" v-else-if="question.answer.is_right===2">{{ question.answer.right_type }}</el-tag>
        <el-tag type="danger" size="small" v-else-if="question.answer.is_right===3">{{ question.answer.right_type }}</el-tag>
      </div>
      <br/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ShowTitleAnswer',
  data() {
    return {}
  },
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {},
  computed: {}
}
</script>
<style scoped>
</style>
